<template>
    <el-select v-model="model" prefix="ios-search" filterable remote :remote-method="handleSearch" :loading="loading"
    @on-change="selected" >
        <el-option v-for="(option, index) in options" :value="option.value" :label="option.value" :key="index">
            <div >{{option.label}}</div>
            <div class="item-detail">{{option.address}}</div>
        </el-option>
    </el-select>
</template>
<script>
import axios from 'axios';
import Qs from 'qs';
import Vue from 'vue';
export default {
    name: 'CourtPicker',
    props: {
        value: {
            type: String,
            default () {
                return "";
            }
        },
        url: { /*数据源链接*/
            type: String,
            default () {
                return "";
            }
        },
        suffixCut: {
            type: String,
            default () {
                return "";
            }
        }
    },
    data() {
        return {
            model: this.value,
            loading: false,
            options: []
        }
    },
    methods: {
        /* 
         * 输入：上海第一中级人民法院，有后缀“人民法院”，返回“上海第一中级人民法院”，input中显示“上海第一中级人民法院”
         * 输入：上海第一中级，无后缀“人民法院”，加上后缀，返回“上海第一中级人民法院”，input中显示“上海第一中级人民法院”
         */
        reformValue(value) {
            let suffixCut = this.suffixCut;
            if (suffixCut) {
                if(this.endWith(value, suffixCut)) {
                    return value;
                }
                return value + suffixCut;
            }
            return value;
        },
        handleSearch(value) {
            if (value === '') {
                return;
            }

            this.loading = true; /*显示正在搜索*/
            Vue.axios.get(this.url, { params: { name: value } })
                .then(response => {
                    this.loading = false; /*隐藏正在搜索*/
                    const list = response.data.data.map(item => {
                        return {
                            value: item.court_name,
                            label: item.court_name,
                            id: item.id,
                            address: item.address
                        };
                    });
                    this.options = list;
                })
                .catch(err => {
                    console.log(" handleSearch err %s", err);
                    this.options = [];
                })
        },
        selected(value, selectedData) {
            let suffixCut = this.suffixCut;
            if(suffixCut && this.endWith(value, suffixCut)) {
                /*
                 * 如果存在suffixCut，那么返回的实际值就不包含suffixCut
                 * 对于：上海第一中级人民法院，如果存在suffixCut，则返回“上海第一中级”
                 */
                value = value.substring(0, value.length - suffixCut.length);
            }
            this.$emit('input', value);
        },
        endWith(value, str) {
            if (str == null || str === "" || value.length === 0 || str.length > value.length) {
                return false;
            }
            if (value.substring(value.length - str.length) === str) {
                return true;
            }
            return false;
        }
    }
}
</script>
<style>
.item-detail {
    padding: 4px 0;
    padding-left: 8px;
    color:#ccc;
}

.demo-auto-complete-group {
    font-size: 12px;
    padding: 4px 6px;
}

.demo-auto-complete-group span {
    color: #666;
    font-weight: bold;
}
</style>